<template>
  <div class="user-profile">
    <van-nav-bar
      class="app-nav-bar"
      title="个人信息"
      left-arrow
      @click-left="$router.back()"
    />

    <!-- 上传文件-->
    <input
      type="file"
      hidden
      accept="image/*"
      ref="file"
      @change="onFileChange"
    >

    <van-cell
      title="头像"
      is-link
      center
      @click="$refs.file.click()"
    >
      <van-image
        width="30"
        height="30"
        round
        fit="cover"
        :src="user.photo"
      />
    </van-cell>
    <van-cell
      title="昵称"
      is-link
      :value="user.name"
      @click="isEditNameShow = true"
    />
    <van-cell
      title="性别"
      is-link
      :value="user.gender === 0 ? '男' : '女'"
      @click="isEditGenderShow = true"
    />
    <van-cell
      title="生日"
      is-link
      :value="user.birthday"
      @click="isEditBirthdayShow = true"
    />

    <!-- 修改昵称 -->
    <van-popup
      v-model="isEditNameShow"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <!--
        当传递给子组件的数据既要使用，又要修改，例如name
        这种情况下我们可以使用v-model简写
        :name="user.name"
        @update-name="user.name = $event"
      -->
      <!--
        v-model="user-name"
        默认传递一个名字叫value的参数
        :value="user.name"
        默认监听input事件 @input="user-name=$event"
        v-model的本质还是父子组件通信，仅仅是简化了父组件的使用
      -->
      <update-name
        v-if="isEditNameShow"
        v-model="user.name"
        @close="isEditNameShow = false"
      />
    </van-popup>
    <!-- /修改昵称 -->

    <!-- 修改性别 -->
    <van-popup
      v-model="isEditGenderShow"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <update-gender
        v-if="isEditGenderShow"
        v-model="user.gender"
        @close="isEditGenderShow = false"
      />
    </van-popup>
    <!-- /修改性别 -->

    <!-- 修改生日 -->
    <van-popup
      v-model="isEditBirthdayShow"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <update-birthday
        v-if="isEditBirthdayShow"
        v-model="user.birthday"
        @close="isEditBirthdayShow = false"
      />
    </van-popup>
    <!-- /修改生日 -->

    <!-- 修改头像 -->
    <van-popup
      v-model="isEditPhotoShow"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <update-photo
        v-if="isEditPhotoShow"
        :file="previewImage"
        @update-photo="user.photo = $event"
        @close="isEditPhotoShow = false"
      />
    </van-popup>
    <!-- /修改头像 -->
  </div>
</template>

<script>
  import { getUserProfile } from '@/api/user'
  import UpdateName from './components/update-name'
  import UpdateGender from './components/update-gender'
  import UpdateBirthday from './components/update-birthday'
  import UpdatePhoto from './components/update-photo'

  export default {
   name: 'UserProfile',
	 components:{
     UpdateName,
     UpdateGender,
     UpdateBirthday,
     UpdatePhoto
   },
	 props:{},
   data () {
     return {
       user:{}, //用户数据
       isEditNameShow: false ,//控制修改昵称的状态
       isEditGenderShow: false,//控制修改性别的状态
       isEditBirthdayShow: false,//控制修改生日的状态
       isEditPhotoShow:false ,//控制修改头像的状态
       previewImage:null ,//预览图片
     }
   },
	 computed: {},
	 watch: {},
	 created () {
     this.loadUserProfile()
   },
	 mounted() {},
   methods:{
     async loadUserProfile () {
       const { data } = await getUserProfile()
       this.user = data.data
     },

     onFileChange () {
       //在弹出层里面预览图片
       const file = this.$refs.file.files[0]
       this.previewImage = file

       // const blob = window.URL.createObjectURL(this.$refs.file.files[0])
       // this.previewImage = blob

       //展示弹出层
       this.isEditPhotoShow = true

       //为了解决相同文件不触发change事件，所以在这里手动的清空file的value
       this.$refs.file.value = ''
     }
   }
  }
</script>

<style scoped lang="less">
  .van-popup{
    background-color: #f5f7f9;
  }
  .update-photo-popup {
    background-color:#000;
  }
</style>
